<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <!-- #ifndef H5 -->
    <u-sticky h5-nav-height="0" bg-color="transparent">
        <u-navbar
            :is-back="false"
            :is-fixed="false"
            title="需求信息"
            :border-bottom="false"
            :title-bold="true"
            :title-color="$theme.navColor"
            :background="{ background: $theme.navBgColor }"
            :title-style="{
                color: '#222222',
                left: '20rpx',
                width: 'calc(100% - 120rpx)',
                textAlign: 'left'
            }"
        >
        </u-navbar>
    </u-sticky>
    <!-- #endif -->
    <view class="home-power-container">
        <!-- 左侧分类 -->
        <view class="category-list">
            <view
                v-for="(item, index) in tabList"
                :key="index"
                class="category-item"
                :class="{ active: current === index }"
                @click="handleChange(index)"
            >
                {{ item.title }}
            </view>
        </view>

        <!-- 右侧内容 -->
        <view class="content-area">
            <tabs
                :current="status"
                @change="handleStatusChanage"
                bg-color="transparent !import"
                inactive-color="#777777"
                active-color="#222222"
                :show-bar="false"
                :style="{ borderRadius: '16rpx' }"
                :active-item-style="{ background: '#e3edf9', color: '#1e88f8' }"
            >
                <tab v-for="(item, i) in home_power_tabs" :key="i" :name="item.name">
                    <view class="news-list pt-[20rpx]">
                        <home-power-list
                            :cid="currentCid"
                            :status="status"
                            :key="`${currentCid}-${status}`"
                        ></home-power-list>
                    </view>
                </tab>
            </tabs>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import NewsList from './component/news-list.vue'
import { getDemandCate } from '@/api/demand'
import HomePowerList from '@/pages/home_power/component/home-power-list.vue'
import UTabs from '@/uni_modules/vk-uview-ui/components/u-tabs/u-tabs.vue'

const tabList = ref<any>([])
const current = ref<number>(0)
const status = ref<number>(0)
const currentCid = ref<string | number>('')
const handleChange = (index: number) => {
    current.value = Number(index)
    // 更新当前选中的分类ID
    currentCid.value = tabList.value[index]?.id || ''
}

const handleStatusChanage = (index: number) => {
    status.value = Number(index)
}

const home_power_tabs = [
    {
        name: '全部'
    },
    {
        name: '求助中'
    },
    {
        name: '帮扶中'
    },
    {
        name: '已完成'
    }
]

const getData = async () => {
    const data = await getDemandCate()
    tabList.value = [{ title: '全部', id: '' }].concat(data)
    // 初始化默认分类ID
    currentCid.value = tabList.value[0]?.id || ''
}

onLoad((options) => {
    getData()
})
</script>

<style lang="scss">
.home-power-container {
    display: flex;
    height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
    overflow: hidden;
}

.category-list {
    width: 200rpx;
    background-color: #ffffff;
    overflow-y: auto;
}

.category-item {
    padding: 30rpx 20rpx;
    font-size: 30rpx;
    color: #777777;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-item.active {
    background-color: white;
    color: #222222;
    font-weight: bold;
    position: relative;
}

.category-item.active:after {
    content: '';
    position: absolute;
    width: 10rpx;
    height: 30rpx;
    background-color: #1e88f8;
    left: 0;
    top: 35rpx;
    border-top-right-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
}

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 20rpx;
}
</style>
